<template>
  <div>
    <el-header>
      <el-row :gutter="24">
        <!--  LOGO      -->
        <el-col :span="9" style="height: 100px">
          <router-link to="/blogHome">
            <el-image style="width: 100px; height: 100%;line-height: 100px"
                      src="https://cdn.logojoy.com/wp-content/uploads/2018/05/30164225/572.png"></el-image>
          </router-link>
        </el-col>
        <el-col :span="15">
          <div class="header-right">
            <!--       栏目     -->
            <el-link :class="link + item.columnIcon" v-text="item.columnName" type="primary" :key="index"
                     :href="item.columnLink"
                     v-for="(item,index) in columns"></el-link>
            <span class="perInfo animate__animated animate__bounceInRight" style=" float: left;">
              <el-dropdown>
                <div class="redius">
                <el-image :src="userInfo.userHead" class="myseven"

                          :fit="'contain'"></el-image>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-link @click="logout">退出登录</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-link href="/blogManage" v-text="'博客管理'"></el-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </div>
        </el-col>
      </el-row>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "BlogHead",

  data() {
    return {
      isLogin: this.$user === null || this.$user === undefined,

      //栏目
      columns: [],
      link: 'link ',
      userInfo: {
        userAddress: '',
        userBirth: '',
        userEducation: '',
        userFans: '',
        userGender: '',
        userInfo: '',
        userLikeTag: '',
        userMajor: '',
        userName: '',
        userPassword: '',
        userRoleId: '',
        userSchool: '',
        userSchoolTime: '',
        userVisits: '',
        usernameId: '',
        userPhone: '',
        userEmail: '',
        userHead: '',
      },
    };
  },


  methods: {
    /**
     * 退出登录,清除item
     */
    logout() {

      localStorage.removeItem('user')

      location.href = '/'
    },

    getColumns() {
      this.$request.getColumns().then((data) => {
        this.columns = data
      })
    },

    /**
     * 获取登录的用户信息
     */
    getUserInfo() {
      this.$request.getUserInfo(this.$user).then((data) => {
        data.data.userLikeTag = JSON.parse(data.data.userLikeTag)
        this.userInfo = data.data
      })
    },

  },

  created() {
    this.getColumns()
    this.getUserInfo()
  }

}
</script>

<style scoped>
.perInfo {
  width: 130px;
  height: 110px;
  display: inline-block;
}

.link {
  float: left;
  font-size: 23px;
  margin-left: 15px;
  line-height: 110px;
}

.el-header, .el-footer {
  height: 110px !important;
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 110px;
}


.redius {
  width: 110px;
  height: 110px;
  border-radius: 100px;
  overflow: hidden;
}

.redius img {
  width: 100%;
  height: 100%;
}
</style>
